<template>
	<view class="yudingcontainer " v-show="show">
		<view class=" yudinghead border-r2">
			<view class="middle_bottom">
				<view class="mb_left">
					<view class="flextop">
						<view class="yudingfont1">{{startime}}</view>
						<view class="yudingfont2">{{startweek}}</view>
					</view>
				</view>
				<view class="yudingfont3 yiwan">
					共{{daynum}}晚
				</view>
				<view class="mb_right">
					<view class="flextop">
						<view class="yudingfont1">{{endtime}}</view>
						<view class="yudingfont2">{{endweek}}</view>
					</view>
				</view>
			</view>
			<view class="chuang">
				<view class="yudingfont1">{{dataAll.hourse.name}}</view>
			</view>
			<view class="flexleft yudingfont3 uu">
				<view class="ilist">{{dataAll.hourse.attention}}</view>
			</view>
		</view>

		<view class="ruzhuinfo border-r2">
			<view class="same mainpadding">入住信息</view>
			<view class="info  mainpadding flexbetween">
				<text>入住人数</text>
				<view class="flexcenter">
					<image class="jian" src="../../static/images/hotel/jian.png" @click="jian"></image>
					<view>{{num}}</view>
					<image class="jian" src="../../static/images/hotel/jia.png" @click="jia"></image>
				</view>
			</view>
			<view class="info mainpadding">
				<text>入住人</text>
				<input type="text" placeholder="请填写真实姓名" v-model="people_name">
			</view>
			<view class="info mainpadding">
				<text>手机号</text>
				<input type="text" placeholder="用于接收预订信息" v-model="people_mobile">
			</view>
		</view>
		<view class="info mainpadding beizhu">
			<text>备注</text>
			<input type="text" placeholder="请输入您的留言内容" v-model="note">
		</view>
		<view class="bottomsubmitbtn flexbetween">
			<view class="price">￥{{Number(dataAll.pay_price).toFixed(2)}}</view>
			<view class="submitcontext" @click="goYuDingorder">立即预订</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				start: "", //年月日
				end: "", //年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum: 1,
				num: 1,
				dataAll: {},
				people_name: "",
				people_mobile: "",
				note: "",
				
				show:false,
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.start = data.start
			this.end = data.end
			this.startime = data.startime
			this.endtime = data.endtime
			this.startweek = data.startweek
			this.endweek = data.endweek
			this.daynum = data.daynum
			this.init()
		},
		methods: {
			init() {
				if (!httpRequest.checkIsLogin()) {
				 httpRequest.doLogin();
				 return false;
				}else{
					httpRequest.request('api/order/sure', 'GET', {
						shop_type_id: this.listid,
						start_date: this.start,
						end_date: this.end
					}, false, false, false).then(res => {
						this.show=true
						this.dataAll = res.data
					}).catch(err => {
						this.show=true
						console.log(1)
						httpRequest.toast(err.msg);
					})
				}
			},
			goYuDingorder() {
				if (this.people_name == "") {
					httpRequest.toast("请填写入住人姓名")
					return false
				}
				if (this.people_mobile == "") {
					httpRequest.toast("请填写入住人手机号")
					return false
				}
				if (!this.people_mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				httpRequest.request('api/order/create_order', 'GET', {
					shop_type_id: this.listid,
					start_date: this.start,
					end_date: this.end,
					people_num: this.num,
					people_name: this.people_name,
					people_mobile: this.people_mobile,
					note: this.note
				}, false, false, false).then(res => {
					console.log(res)
					if(res.code==1){
						let data = {
							id:res.data.id,
							pay_price:res.data.pay_price,
							type:1,
							allscore:res.data.allow_score
						}
						uni.redirectTo({
							url:'/pages/hotel/hotelorder?msg=' + encodeURIComponent(JSON.stringify(data))
						})
					}else{
						httpRequest.toast('不好意思，当前房型已满!');
						setTimeout(()=>{
							uni.navigateBack(-1)
						},1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})

			},
			jian() {
				if (this.num > 1) {
					this.num--;
				} else {
					this.num = 1
				}
			},
			jia() {
				if (this.num < this.dataAll.hourse.limit_num) {
					this.num++;
				} else {
					httpRequest.toast("该房型最多可入住" + this.dataAll.hourse.limit_num + "人")
				}
			}
		}
	}
</script>

<style lang="scss">
	.yudingcontainer {
		background-color: #fafafa;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.yudinghead {
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.yiwan {
		padding: 4rpx 24rpx;
	}

	.same {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 35rpx;
	}

	.info {
		display: flex;
		align-items: center;

		text {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 33rpx;
			margin-right: 30rpx;
		}
	}

	input {
		width: 75%
	}

	.ruzhuinfo {
		background-color: #FFFFFF;
		margin-top: 30rpx;
	}

	input::placeholder {
		color: #999999
	}

	.yiwan {
		border: 1rpx solid #E8E8E8;
		border-radius: 21rpx;
		padding: 4rpx 24rpx;
	}

	.middle_bottom {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.mb_left,
		.mb_right {
			display: flex;
			flex-direction: column;
		}
	}

	.chuang {
		margin-top: 20rpx;
	}

	.yudingfont1 {
		font-size: 32rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
		color: #000000;
		line-height: 38rpx;
		margin-right: 8rpx;
	}

	.yudingfont2 {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 30rpx;
	}

	.yudingfont3 {
		font-size: 19rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 22rpx;
	}

	.ilist {
		margin-right: 26rpx;
	}

	.uu {
		margin-top: 20rpx;
	}

	.jia,
	.jian {
		width: 34rpx;
		height: 34rpx;
		padding: 14rpx;
	}

	input {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 33rpx;
		height: 33rpx;
		border-bottom: 2rpx solid #FAFAFA;
	}

	.beizhu {
		margin-top: 30rpx;
		background-color: #FFFFFF;

		input {
			margin-left: 36rpx;
		}
	}

	.bottomsubmitbtn {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		left: 0rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		line-height: 100%;

		.price {
			font-size: 36rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF5C00;
			line-height: 28rpx;
		}

		.submitcontext {
			border-radius: 120rpx;
			background-color: #FF5C00;
			padding: 2rpx 84rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>
